<template>
  <div class="earlyWarningTrend-root">
    <formTitleVue
      title="预警趋势"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-earlyWarningTrend"></div> -->
    <myLine domId="overview-earlyWarningTrend-echarts" height="22vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myLine from '@/components/Echarts/myLine.vue';
import { time_select_optios } from '@/utils/global.js';
import { alarmWarningTrend } from '@/api/alarm/statistics'


export default {
  name: "earlyWarningTrend",
  components: {
    formTitleVue,myLine,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      dateTypeObject:{ "近一月":"03", "近半年":"02", "近一年":"02"},
      chartsData: {
        xData: [],
        yData: [],
      },
      echartsOption:{
        legend:{
          top: "2%"
        },
        grid:{
          top: "16%",
          left: "4%",
          right: "4%",
          bottom: "4%",
          containLabel: true
        },
      },
      searChForm: {
        startTime: '',
        endTime: '',
        dateType:"",
      },
    };
  },
  methods: {
    selectChange(item) {
      this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
      this.searChForm.dateType = this.dateTypeObject[item]
      this.getData()
    },
    getData(){
      let params = {
        ...this.searChForm,
        areaCode:this.$store.state.account.user.deptIds
      }
      alarmWarningTrend(params).then(res=>{
          if(res.code==200){
            this.chartsData.xData= res.data.xAxle
            this.chartsData.yData= res.data.data
          }
      })
    },
  },
  created() {
    this.selectChange(this.selectOptions[0].selectValue);
  },
};
</script>

<style lang="scss" scoped>
.earlyWarningTrend-root {
  background-color: white;
  flex: 1;
  #echarts-earlyWarningTrend {
  }
}
</style>
